<template>
  <el-dialog
    title="申请会议室"
    :visible.sync="dialogValue"
    width="800px"
    append-to-body
  >
    <el-form ref="roomFormRef" :model="ruleForm" :rules="rules">
      <el-form-item label="选择会议室" prop="meetingId">
        <el-select v-model="ruleForm.meetingId" @change="changeMeeting">
          <el-option v-for="item in meetingList" :key="item.value" :value="item.value" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间段">
        <div class="meeting-status-list f-r a-c">
          <div class="meeting-status-item1 f-r a-c">
            <div class="meeting-status-icon" />
            <span>可选</span>
          </div>
          <div class="meeting-status-item2 f-r a-c">
            <div class="meeting-status-icon" />
            <span>已选</span>
          </div>
          <div class="meeting-status-item3 f-r a-c">
            <div class="meeting-status-icon" />
            <span>已使用</span>
          </div>
        </div>
        <div class="date-box f-r">
          <div>
            <div class="f-r j-b a-c">
              <div class="text">日期选择</div>
              <el-date-picker
                v-model="ruleForm.month"
                @change="changeDate"
                style="margin-bottom: 10px;width: 120px"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择月"
                :clearable="false"
              />
            </div>
            <div class="date">
              <a-locale-proveider :locale="locale">
                <a-calendar v-model="currentDay" :fullscreen="false" @select="onSelectDay">
                  <template slot="dateFullCellRender" slot-scope="value">
                    <div :class="['day', ...getDayClass(value)]">
                      {{ formtDate(value) }}
                    </div>
                  </template>
                  <template slot="headerRender" slot-scope="value" />
                </a-calendar>
              </a-locale-proveider>
            </div>
          </div>
          <div style="margin-left: 30px">
            <el-form-item label="会议预计开始时间" prop="startTime">
              <el-time-select
                v-model="ruleForm.startTime"
                :picker-options="pickerOptions"
                placeholder="选择时间"
              />
            </el-form-item>
            <el-form-item label="会议结束时间" prop="endTime">
              <el-time-select
                v-model="ruleForm.endTime"
                :picker-options="pickerOptions"
                placeholder="选择时间"
              />
            </el-form-item>
            <el-form-item label="当天已约会议时间">
              <div class="f-r f-w" style="width: 100%">
                <a-tag style="margin-bottom: 5px" v-for="item in currentDayUseTime.useTime" color="red">
                  {{ item.startTime }} - {{ item.endTime }}
                </a-tag>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <slot name="footer">
      <div style="text-align: right">
        <el-button type="primary" @click="onSave">提交</el-button>
        <el-button @click="dialogValue = false">取消</el-button>
      </div>
    </slot>
  </el-dialog>
</template>

<script>
import { http } from '@/api'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
export default {
  name: 'ApplyRoom',
  data() {
    return {
      locale: zh_CN,
      dialogValue: false,
      meetingList: [],
      ruleForm: {
        month: moment().format('YYYY-MM'),
        meetingId: '',
        startTime: '',
        dateType: '',
        endTime: ''
      },
      rules: {
        meetingId: [{ required: true, message: '不能为空' }],
        startTime: [{ required: true, message: '不能为空' }],
        endTime: [{ required: true, message: '不能为空' }]
      },
      meetingStatusList: [
      ],
      currentDay: moment().format('YYYY-MM-DD'),
      currentDetail: {}
    }
  },
  computed: {
    // pickerOptions() {
    //   if (this.ruleForm.dateType === 1) {
    //     return {
    //       start: '00:00',
    //       step: '00:15',
    //       end: '12:00'
    //     }
    //   }
    //   return {
    //     start: '12:00',
    //     step: '00:15',
    //     end: '24:00'
    //   }
    // },
    pickerOptions() {
      return {
        start: '08:30',
        step: '00:15',
        end: '24:00'
      }
    },
    currentDayUseTime() {
      return this.meetingStatusList.find(el => el.day === this.currentDay) || { useTime: [] }
    }
  },
  methods: {
    open(item) {
      this.currentDetail = item
      http.meetingRoom.list().then(res => {
        this.meetingList = res.data.map(el => {
          return {
            value: el.id,
            name: el.meetingName
          }
        })
        if (this.meetingList.length) {
          this.ruleForm.meetingId = this.meetingList[0].value
          this.getMeetingStatusList()
        }
      })
      this.dialogValue = true
    },
    onSelectDay(date) {
      this.currentDay = moment(date).format('YYYY-MM-DD')
        console.log(this.currentDay)
    },
    formtDate(date) {
      return moment(date).format('DD')
    },
    getDayClass(date) {
      const day = moment(date).format('YYYY-MM-DD')
      const find = this.meetingStatusList.find(el => el.day === day)
      if (this.currentDay === day) {
        return ['blue']
      }
      if (!find) return []
      if (find.useTime && find.useTime.length) {
        return 'red'
      }
      return ['grey']
    },
      changeDate() {
        this.currentDay = moment(this.ruleForm.month).format('YYYY-MM-DD')
          console.log(this.currentDay)
          this.getMeetingStatusList()
      },
    changeMeeting() {
      this.getMeetingStatusList()
    },
    getMeetingStatusList() {
      http.meetingRoom.statusList({
        meetingId: this.ruleForm.meetingId,
        month: this.ruleForm.month
      }).then(res => {
        this.meetingStatusList = res.data
      })
    },
    onSave() {
      this.$refs.roomFormRef.validate(valid => {
        if (valid) {
          http.meetingRoom.create({
            id: this.currentDetail.id,
            meetingId: this.ruleForm.meetingId,
            startTime: this.currentDay + ' ' + this.ruleForm.startTime + ':00',
            endTime: this.currentDay + ' ' + this.ruleForm.endTime + ':00'
          }).then(res => {
            this.$message.success(res.msg)
            this.$emit('get-page')
            this.dialogValue = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.meeting-status-list {
    padding-left: 20px;
    .meeting-status-item1 {
        .meeting-status-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid #999;
            background-color: #f1f1f1;
            margin-right: 10px;
        }
        font-size: 14px;
        color: #999;
    }
    .meeting-status-item2 {
        margin: 0 20px;
        .meeting-status-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid #5a7cf5;
            background-color: #e2ecf8;
            margin-right: 10px;
        }
        font-size: 14px;
        color: #5a7cf5;
    }
    .meeting-status-item3 {
        .meeting-status-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid #e34f53;
            background-color: #fddfe0;
            margin-right: 10px;
        }
        font-size: 14px;
        color: #e34f53;
    }
}
.date-box {
    box-shadow: 6px 6px 54px 1px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    margin-top: 20px;
    padding: 20px;
    .ant-fullcalendar {
        border-top: none;
    }
    .date {
        width: 360px;
        border: 1px solid #e2e2e2;
        padding: 10px;
        border-radius: 8px;
    }
    .ant-fullcalendar-selected-day {
        .day {
            color: #5a7cf5;
            border: 1px solid #5a7cf5;
            background-color: #e2ecf8;
        }
    }
}
.grey {
    color: #999;
}
.blue {
    color: #5a7cf5;
    border: 1px solid #5a7cf5;
    background-color: #e2ecf8;
}
.red {
    color: #e34f53;
}
.day {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

</style>
